<template>
    <div class="category-wrapper">
        <ul class="category-list">
            <li v-for="item in categories" :key="item.id" @click="goToDetail(item)">
                <a>{{item.name}}</a>
                <span> ({{item.num}})</span>
            </li>
        </ul>
        <div class="placeholder" v-show="showPlaceholder">
            <el-skeleton :rows="4" animated />
        </div>
        <BlogDivider/>
        <BlogComment/>
    </div>
</template>

<script setup>

import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

import BlogDivider from '@/components/BlogDivider.vue';
import BlogComment from '@/components/BlogComment.vue';

import categoryApi from '@/api/category.js';

import { useGlobalStore } from '@/stores/global';

const globalStore = useGlobalStore();
let router = useRouter();

let categories = ref([])
let showPlaceholder = ref(true)

onMounted(() => {
    categoryApi.getList().then(res => {
        setTimeout(() => {
            showPlaceholder.value = false;
            categories.value = res.data;
        }, 2000)
        
    }).catch(e => {
        ElMessage.error(e.message)
    })
})

const goToDetail = async (item) => {
    const navigationResult = await router.push({name:'categories-detail', params:{id: item.id}});
    if (!navigationResult) { // 路由跳转成功
        globalStore.updateNavTitle(item.name);
    }
}

</script>

<style lang="scss" scoped>

.category-wrapper {
    padding: 20px;
    @include border;
    @include box-shadow;
    // background-color: plum;
    .category-list {
        margin: auto 6%;
        list-style: none;
        // background-color: orange;
        li {
            text-align: left;
            line-height: 2;
            // background-color: fuchsia;
            a {
                // color: $text-color-333;
                text-decoration: none;
                &:hover {
                    color: var(--primary-color);
                }
            }
            span {
                color: var(--text-color-soft);
            }
            &::before {
                content: "";
                box-sizing: border-box;
                display: inline-block;
                width: 12px;
                height: 12px;
                border: 3px solid var(--primary-color);
                border-radius: 50%;
                margin-right: 6px;
                cursor: pointer;
                transition: all 0.3s ease-out;
                // background-color: orangered;
            }
            &:hover::before {
                border-color: orange;
            }
        }
    }
    .placeholder {
        text-align: left;
    }
}

</style>